<template>
  <div class="interview-Table" style="margin-top: 20px">
    <div style="margin: 0 20px; padding: 20px 0; font-size: 18px">{{ listTitle }}</div>
    <slot name="lists"></slot>
    <div class="demo-pagination-block">
      <div class="demonstration">All combined</div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { ComponentSize } from 'element-plus'
const props = defineProps({
  listTitle: {
    type: String,
    default: '',
  },
})
const currentPage = ref(1)
const pageSize = ref(5)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const tableData = ref(50)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.interview-Table {
  background-color: #fff;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
